<script setup>
import {deleteOne} from "@/boot/collection.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  name: String,
  picUrl: String,
  foodType: String,
  location: String,
  button: Boolean,
  collectionId: Number
})
const deleteComment = ()=>{
  deleteOne({id:props.collectionId}).then(res=>{
    if(res.data.code === 200){
      ElMessage.success('取消收藏成功')
    }
  })
}
</script>

<template>
  <div class="w-full h-full shadow-md rounded">
    <div class="flex flex-col items-center justify-center">
      <div class="w-64 h-64 bg-gray-200 rounded-full flex items-center justify-center">
        <img :src="props.picUrl" class="w-64 h-64 rounded-full" alt="rest image">
      </div>
      <div class="mt-4">
        <h1 class="text-2xl font-bold">{{props.name}}</h1>
        <div class="flex justify-center gap-5 pb-4">
          <el-tag type="success">{{props.foodType}}</el-tag>
          |
          <el-tag >{{props.location}}</el-tag>
        </div>
        <div class="mt-2 flex justify-center" v-if="props.button">
          <el-button @click="deleteComment" type="primary">取消收藏</el-button>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>

</style>